<template>
  <div>
    <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="设备" >
                <el-select v-model="search.mac" placeholder="请选择">
                  <el-option v-for="item in machineAllList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始日期" >
                <el-date-picker class="noMargin" v-model="search.time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']">
                </el-date-picker>
              </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <el-button type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
     <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
      <el-table-column prop="macName" label="设备名" sortable width="100"></el-table-column>
      <el-table-column prop="nums" label="铁屑数量" sortable-width="100" > </el-table-column>
      <el-table-column prop="remark" label="备注" sortable min-width="100"></el-table-column>
      <el-table-column prop="creatorName" label="处理人" sortable width="100"></el-table-column>
      <el-table-column prop="createTime" label="处理时间" sortable width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" align="right" width="100">
        <template slot-scope="scope">
           <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
           <el-button @click="showDialog('delete',scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow" v-dialogDrag>
      <el-form :model="dialog.formData" ref="ruleForm1" label-width="180px" class="demo-ruleForm" :inline="true">
        <el-form-item label="设备" prop="mac">
          <el-select v-model="dialog.formData.mac" placeholder="请选择设备" class="noMargin">
            <el-option v-for="item in machineAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="铁屑数量" prop="nums">
          <el-input v-model="dialog.formData.nums" class="width220" ></el-input>
        </el-form-item>
         <el-form-item label="备注" prop="remark" class="form-item-block">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="dialog.formData.remark" class="width520"></el-input>
        </el-form-item>
        <el-form-item label="处理人" prop="creatorName" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.creatorName" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item label="处理时间" prop="createTime" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.createTime" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item  class="form-item-block text-center">
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ironFlingsApi from 'plugins/axios/ironFlingsApi.js';
import baseApi from 'plugins/axios/baseApi.js';

export default {
  components: {

  },
  data(){
    return {
      loading:false,
      tableList:[],
      machineAllList:[],/**机器列表 */
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      search:{
        mac:'',
        time:[]
      },
      dialog:{
        title:'',
        isShow:false,
        type:'',
        formData:{}
      }
    }
  },
  created(){},
  mounted(){
    this.getTablList();
    this.getmachineAllList();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  methods:{
    /**29所计划列表 */
    getTablList(){
      
      let self = this;
      let data={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        mac:self.search.mac,
        minCreateTime:self.search.time[0]?self.timestampToTime(self.search.time[0]):null,
        maxCreateTime:self.search.time[1]?self.timestampToTime(self.search.time[1]):null,
      }
      ironFlingsApi.ironTaskList(data).then(res=>{
        self.tableList =res.content.records;
        self.pagination.total = res.content.total;
      })
    },
    getmachineAllList(){
      let self = this;
      baseApi.machineAllList().then(res=>{
        self.machineAllList=res.content;
      })
    },
    searchBtn(){
      this.getTablList();
    },
     handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.getTablList();
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.getTablList();
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type =type;
      switch(type){
        case 'insert':
          self.dialog.isShow=true;
          self.dialog.formData={};
          self.dialog.title = '新增铁屑任务';
          break;
        case 'update':
          self.dialog.isShow=true;
          self.dialog.formData = row;
          self.dialog.title = '修改铁屑任务';
          break;
        case 'delete':
          self.$confirm('确认是否删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ironFlingsApi.deleteIronTask(row.id).then(res=>{
            self.$message.success('删除成功');
            self.getTablList();
          })
        }).catch(() => {});
          break;
      } 
    },
    onSubmit(){
      let self = this;
      let postData = JSON.parse(JSON.stringify(self.dialog.formData));
      ironFlingsApi.insertUpdateIronTask(self.dialog.type,postData).then(res=>{
       self.dialog.isShow = false;
       self.$message.success(`${self.dialog.title}成功`);
       self.getTablList();
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .addRole
    padding-bottom 10px
  .content-rowspan div
    padding-left: 13px;
    line-height: 46px;
    border-bottom: 1px solid #ECEDEE;
    &:last-child
       border-bottom:none
</style>
